<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day04_demo1</title>
<style>
	#d0,p{
		width:400px;
		border:1px solid red;
	}
	
	p{
		font-size:30px;
	}
	
	#d1,#d2,#d3{
		width:100px;
		height:100px;
		margin:10px;
	}
	#d1{
		background-color:red;
	}
	#d2{
		background-color:green;
	}
	#d3{
		background-color:blue;
	}
	
	/*浮动 */
	/* #d1,#d2,#d3{
		float:right;
	}
	*/
	
	#d1,#d2,#d3{
		float:left;
	}
	
	/*消除浮动影响*/
	/* p{
		clear:left;
	
	}*/

	#d4{
		clear:left;
	}



</style>

</head>
<body>
	<div id="d0">
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
		<div id="d4"></div>
	</div>
	<p>浮动时观察我的位置</p>
</body>
</html>